<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>修改用户头像</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item layui-form-text" style="width: 200px">
        <label class="layui-form-label">用户头像</label>
        <div class="layui-input-inline">
            <img id="userImg" style="width: 200px" src="${user.img}" onerror="javascript:this.src='${pageContext.request.contextPath}/resources/imgs/default.jpg'" alt="">
        </div>
    </div>

    <div class="layui-form-item" >
        <button class="layui-btn" type="button" id="subBtn" style="width: 200px;margin-top: 30px">确认</button>
    </div>
</form>

<script src="${pageContext.request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['layer','jquery','upload'],function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let upload = layui.upload;
        //渲染一个文件上传组件
        let opt = {
            elem:"#userImg",//文件上传组件绑定的容器
            url:"${pageContext.request.contextPath}/user.do?service=upload",//文件上传后台接口地址
            accept:"images",//文件上传的支持的数据格式
            acceptMime:'image/*',//文件选择框的过滤  支持文件格式
            exts:"jpg",//文件后缀
            auto:false,//不自动上传
            bindAction:"#subBtn",//触发文件上传的按钮
            field:"userImg",//文件域的name属性的值  后台获取数据的凭证
            size:1000,//允许上传的文件的大小  单位是kb
            choose:function (obj) {//当选择了图片触发的回调函数
                obj.preview(function(index, file, result){
                    console.log(index); //得到文件索引
                    console.log(file); //得到文件对象
                    console.log(result); //得到文件base64编码，比如图片  img src : url base64字符串
                    $("#userImg").attr("src",result);//将图片的src值 改为其base64编码字符串串

                })
            },
            done: function(rs, index, upload){//当请求成功 时调用的方法
                //  res 就是返回的数据
                //index 文件索引
                //upload 上传对象
                console.log(rs);
                console.log(index);
                console.log(upload);
                layer.msg(rs.msg);
                if (rs.code != 200){
                    return false;
                }
                let url = rs.data;//上传的图片的访问路径
                parent.window.document.getElementById("userImg").src = '${pageContext.request.contextPath}/'+url;
            }
        };
        upload.render(opt);
    });
</script>
</body>
</html>
